
$(document).ready(function() {

    var allPanels = $("#accordion ul").hide();
    $("#accordion h3").click(function() {
        $this = $(this);
        $target = $this.parent().find('ul');

        if (!$this.hasClass('active')) {
            $("#accordion h3").removeClass('active');
            allPanels.slideUp('fast');
            $this.addClass('active');
            $target.slideDown('fast');
        }
    });


    $('.tool_button').click(function() {
        $('.tool_button').removeClass('actived');
        $(this).addClass('actived');
        var id = $(this).attr('id');
        $(".tab-item").each(function() {
            $(".tab-item").css('display', 'none');
        });
        $("#" + id.substr(5)).css('display', 'block');
    });


    $('canvas').mousemove(function() {
        $(this).addClass('active');
    }).mouseout(function() {
        $('canvas').removeClass('active');
    });


    /**
     * UPLOAD FILES
     **/
    new Dropzone(document.body, {
        url: "FrontEnd/add_img",
        previewsContainer: "#previews",
        clickable: "#clickable",
        init: function() {

            this.on("addedfile", function(file) {

                var removeButton = Dropzone.createElement("<button alt='Delete'>X</button>");

                var _this = this;

                removeButton.addEventListener("click", function(e) {

                    e.preventDefault();
                    e.stopPropagation();

                    _this.removeFile(file);
                    removedfile(file);
                });

                file.previewElement.appendChild(removeButton);
            });

            thisDropzone = this;
            $.get('FrontEnd/add_img', function(data) {

                $.each(data, function(key, value) {
                    var mockFile = {name: value.name, size: value.size};

                    thisDropzone.options.addedfile.call(thisDropzone, mockFile);

                    thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "img/images/uploads/" + value.name);
                });

            });

            var removedfile = function(file) {

                var name = file.name;
                $.ajax({
                    type: 'POST',
                    url: 'FrontEnd/delete_img',
                    data: "id=" + name,
                    dataType: 'html'
                });
            }

        }
    });


    /**
     * ADD IMAGE UPLOADED IN CANVAS
     **/
    $(document).on('click', '.dz-details > img', function() {

        var url = $(this).attr('alt');
        fabric.Image.fromURL('img/images/uploads/' + url, function(image) {

            image.set({
                left: 100,
                top: 100,
                angle: 0
            })
                    .scale(0.5)
                    .setCoords();

            canvas.add(image);
        });
    });


    $('#insert-video').click(function() {

        var link = $('#link').val();
        var img_url;

        if (link) {
            var url = document.createElement('a');
            var site;
            url.href = link;
            site = url.hostname;
            switch (site) {
                case 'vimeo.com':
                    id_vimeo = getVimeoId(link);
                    img_url = getImageVimeo(id_vimeo);
                    break;
                case 'www.youtube.com':
                    id_youtube = youtube_parser(link);
                    img_url = getImageYoutube(id_youtube);
                    break;
            }
        } else {
            alert('Not input link');
            return;
        }

        fabric.util.loadImage(img_url, function(img) {
            var object = new fabric.Image(img);
            object.set({
                left: 200,
                top: 300
            });
            canvas.add(object);
            canvas.renderAll();
        }, null, {crossOrigin: 'Anonymous'});

        canvas.renderAll();

    });

    var youtube_parser = function(url) {
        var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
        var match = url.match(regExp);
        if (match && match[7].length == 11) {
            return match[7];
        } else {
            alert("Url incorrecta");
        }
    }

    function getVimeoId(url) {
        var match = /vimeo.*\/(\d+)/i.exec(url);
        if (match) {
            return match[1];
        }
    }

    function getImageVimeo(id) {
        var result;
        $('#img_link').val();
        $.ajax({
            type: 'POST',
            url: 'FrontEnd/parse_vimeo_json',
            data: "id=" + id,
            async: false,
            success: function(response) {
                result = response;
            }
        });
        return result;
    }

    function getImageYoutube(id) {
        var result;
        $.ajax({
            type: 'POST',
            url: 'FrontEnd/parse_youtube_json',
            data: "id=" + id,
            async: false,
            success: function(response) {
                result = response;
            }
        });
        return result;
    }
})
jQuery(document).ready(function() {
    var i = 0;
    $(".opacity").click(function() {
        $("#wrap-slider").toggle();
    });

});



$(document).ready(function() {
    $('#sliderbackground').slider();
    $(".colorbox-pickbox").click(function() {
        var bg = $(this).attr('id');
        var hexa = bg.substr(bg.indexOf('-') + 1, bg.length);
        hexa = hexa.toUpperCase();
        $("#hexxa").text("#" + hexa);
        if (hexa === 'FFFFFF' || hexa === 'ECECEC') {
            $("#hexxa").css({"color": "#000000"});
        } else
            $("#hexxa").css({"color": $("#hexxa").text()});
    });

   
});

function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length === 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}



